<template>
  <div class="article-manager-container">
    <!-- 头部标题和操作按钮 -->
    <div class="header">
      <h1 class="title">文章管理</h1>
      <div class="actions">
        <el-button type="primary" :icon="Plus" @click="openAddDialog">添加文章</el-button>
        <el-button type="success" :icon="Refresh" @click="refreshData">刷新</el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchParams" :inline="true" class="search-form">
        <el-form-item label="文章标题">
          <el-input
            v-model="searchParams.title"
            placeholder="输入文章标题"
            clearable
            @clear="handleSearch"
          />
        </el-form-item>

        <el-form-item label="分类">
          <el-select
            v-model="searchParams.category_id"
            placeholder="选择分类"
            clearable
            style="width: 160px"
          >
            <el-option
              v-for="category in categories"
              :key="category.category_id"
              :label="category.category_name"
              :value="category.category_id"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="searchParams.tag_ids"
            multiple
            filterable
            placeholder="选择标签(最多三个)"
            clearable
            style="width: 300px"
            @change="handleTagChange"
          >
            <el-option
              v-for="tag in tags"
              :key="tag.tag_id"
              :label="tag.tag_name"
              :value="tag.tag_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select
            v-model="searchParams.status"
            placeholder="全部"
            clearable
            style="width: 100px"
          >
            <el-option label="全部" :value="undefined"/>
            <el-option label="已发布" :value="1"/>
            <el-option label="草稿" :value="0"/>
          </el-select>
        </el-form-item>

        <el-form-item class="search-buttons">
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 文章列表 -->
    <el-card class="table-card" shadow="never">
      <el-table
        :data="articleList"
        v-loading="loading"
        style="width: 100%"
        :default-sort="{ prop: 'publish_date', order: 'descending' }"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column prop="article_id" label="ID" width="80" align="center" sortable/>

        <el-table-column label="封面" width="120" align="center">
          <template #default="{ row }">
            <el-image
              :src="row.cover || placeholderImage"
              :initial-index="0"
              fit="cover"
              class="article-cover"
            />
          </template>
        </el-table-column>

        <el-table-column label="标题" min-width="220">
          <template #default="{ row }">
            <div class="article-title">
              <span>{{ row.title }}</span>
              <el-tag v-if="row.is_admin" size="small" effect="dark" type="success" class="admin-tag">
                管理员
              </el-tag>
            </div>
            <div class="article-intro">{{ row.intro }}</div>
          </template>
        </el-table-column>

        <el-table-column label="分类" width="120" align="center">
          <template #default="{ row }">
            <el-tag>{{ row.category_name }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="publish_date" label="发布日期" width="150" align="center" sortable>
          <template #default="{ row }">
            {{ row.publish_date === 0 ? '未发布' : timestampFormat(row.publish_date) }}
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'warning'">
              {{ row.status ? '已发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="数据" width="150" align="center">
          <template #default="{ row }">
            <div class="stats">
              <span class="stat-item"><el-icon><View/></el-icon> {{ row.views }}</span>
              <span class="stat-item"><el-icon><Star/></el-icon> {{ row.good_count }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" plain @click="viewArticle(row)">查看</el-button>
            <el-dropdown trigger="click">
              <el-button type="info" size="small" plain>
                更多
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="editArticle(row)">
                    <el-icon>
                      <Edit/>
                    </el-icon>
                    编辑
                  </el-dropdown-item>
                  <el-dropdown-item @click="toggleStatus(row)">
                    <el-icon>
                      <Document/>
                    </el-icon>
                    {{ row.status ? '设为草稿' : '发布文章' }}
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="deleteArticle(row)" class="danger-item">
                    <el-icon>
                      <Delete/>
                    </el-icon>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 批量操作 -->
      <div class="batch-actions" v-if="selectedArticles.length > 0">
        <el-button type="danger" size="small" @click="batchDelete" :icon="Delete">
          批量删除 ({{ selectedArticles.length }})
        </el-button>
        <el-button type="success" size="small" @click="batchPublish" :icon="Document">
          批量发布
        </el-button>
        <el-button type="warning" size="small" @click="batchDraft" :icon="DocumentDelete">
          批量设为草稿
        </el-button>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑文章对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="editMode ? '编辑文章' : '添加文章'"
      width="90%"
      top="5vh"
      :close-on-click-modal="false"
      class="article-dialog"
      @closed="handleDialogClosed"
    >
      <el-scrollbar height="70vh">
        <el-form :model="articleForm" label-width="100px" ref="articleFormRef">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="文章标题" prop="title" required>
                <el-input v-model="articleForm.title" placeholder="请输入文章标题"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-switch
                  v-model="articleForm.status"
                  active-text="发布"
                  inactive-text="草稿"
                  :active-value="true"
                  :inactive-value="false"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分类" prop="category_id" required>
                <el-select v-model="articleForm.category_id" placeholder="请选择分类" style="width: 100%">
                  <el-option
                    v-for="category in categories"
                    :key="category.category_id"
                    :label="category.category_name"
                    :value="category.category_id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签" prop="tag_ids">
                <el-select
                  v-model="articleForm.tag_ids"
                  multiple
                  placeholder="选择文章标签"
                  style="width: 100%"
                >
                  <el-option
                    v-for="tag in tags"
                    :key="tag.tag_id"
                    :label="tag.tag_name"
                    :value="tag.tag_id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="封面图" prop="cover">
            <div class="cover-uploader-container">
              <el-upload
                class="cover-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :auto-upload="true"
                :on-success="handleCoverSuccess"
                :before-upload="beforeCoverUpload"
                :headers="{Authorization: Storage.get(ACCESS_TOKEN_KEY)}"
                name="avatar"
              >
                <img v-if="articleForm.cover" :src="articleForm.cover" class="cover-image" fit="cover"
                     :initial-index="0"
                     :hide-on-click-modal="true" :preview-src-list="[articleForm.cover]"/>
                <div v-else class="cover-placeholder">
                  <el-icon class="cover-uploader-icon">
                    <Plus/>
                  </el-icon>
                  <div class="cover-tip">上传封面图</div>
                </div>
              </el-upload>
              <div class="cover-actions">
                <el-button type="danger" size="small" @click="articleForm.cover = ''" v-if="articleForm.cover">
                  移除封面
                </el-button>
                <div class="cover-hint">支持JPG/PNG/GIF格式</div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="简介" prop="intro">
            <el-input
              v-model="articleForm.intro"
              type="textarea"
              :rows="3"
              placeholder="请输入文章简介"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="文章内容" prop="content" class="editor-container">
            <div id="vditor" class="vditor-container"></div>
          </el-form-item>
        </el-form>
      </el-scrollbar>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="submitArticleForm">
            {{ editMode ? '更新' : '创建' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, nextTick, onBeforeUnmount} from 'vue'
import {ElMessage, ElMessageBox, UploadProps} from 'element-plus'
import {
  ArrowDown,
  Delete,
  Document,
  DocumentDelete,
  Edit,
  Plus,
  Refresh,
  Search,
  Star,
  View
} from '@element-plus/icons-vue'
import ArticleAPI, {QueryMultiArticle} from '@/api/system/article.api'
import TagAPI from "@/api/system/tag.api";
import {type ArticleInfo} from '@/api/system/article.api'
import CategoryAPI from '@/api/system/category.api'
import {timestampFormat} from "@/utils"
import Vditor from "vditor"
import "vditor/dist/index.css"
import {Storage} from "@/utils/storage";
import {ACCESS_TOKEN_KEY} from "@/constants/cache-keys";
import moment from 'moment'

const currentDate = moment()
const uploadUrl = ref<string>('http://127.0.0.1:4000/api/admin/upload')
const vditor = ref<Vditor | null>(null)
const placeholderImage = ref('https://via.placeholder.com/600x400?text=Article+Cover')
const timestampInSeconds = currentDate.unix();

// 最大标签数量
const MAX_TAGS = 3

// 文章数据
const articleList = ref<ArticleInfo[]>([])
const loading = ref(false)
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 搜索参数
const searchParams = reactive<QueryMultiArticle>({
  title: undefined,
  category_id: undefined,
  tag_ids: undefined,
  status: undefined
})

// 标签和分类数据
const tags = ref<any[]>([])
const categories = ref<any[]>([])

// 添加/编辑文章
const showAddDialog = ref(false)
const editMode = ref(false)
const articleForm = reactive<ArticleInfo>({
  article_id: 0,
  title: '',
  content: '',
  publish_date: 0,
  intro: '',
  views: 0,
  status: true,
  cover: '',
  tag_ids: '',
  is_admin: false,
  category_id: 0,
  category_name: '',
  add_date: 0,
  update_date: 0,
  user_id: 0,
  admin_id: 0,
  good_count: 0
})

// 批量操作
const selectedArticles = ref<ArticleInfo[]>([])

// 初始化加载数据
onMounted(() => {
  fetchArticles()
  fetchTags()
  fetchCategories()
})

// 标签数量超过最大限制
const handleTagChange = (value: number[]) => {
  if (value && value.length > MAX_TAGS) {
    // 如果超过最大数量，截断数组并提示用户
    searchParams.tag_ids = value.slice(0, MAX_TAGS)
    ElMessage.warning(`最多只能选择 ${MAX_TAGS} 个标签`)
  }
}

// 获取文章列表
const fetchArticles = async () => {
  try {
    loading.value = true
    const params: QueryMultiArticle = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      ...searchParams
    }

    const response = await ArticleAPI.fetchArticle(params)

    articleList.value = response.article
    pagination.total = response.count

  } catch (error) {
    console.error('获取文章列表失败:', error)
    ElMessage.error('获取文章列表失败')
  } finally {
    loading.value = false
  }
}

// 获取所有标签
const fetchTags = async () => {
  try {
    tags.value = await TagAPI.getAllTag()
  } catch (error) {
    console.error('获取标签失败:', error)
    ElMessage.error('获取标签失败')
  }
}

// 获取所有分类
const fetchCategories = async () => {
  try {
    // 获取分类的API
    categories.value = await CategoryAPI.getAllCategory()
  } catch (error) {
    console.error('获取分类失败:', error)
    ElMessage.error('获取分类失败')
  }
}

// 搜索文章
const handleSearch = async () => {
  fetchArticles()
}

// 重置搜索
const resetSearch = () => {
  searchParams.title = ''
  searchParams.category_id = undefined
  searchParams.status = undefined
  searchParams.tag_ids = undefined
  handleSearch()
}

// 分页处理
const handlePageChange = (page: number) => {
  pagination.currentPage = page
  fetchArticles()
}

const handlePageSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  fetchArticles()
}

// 刷新数据
const refreshData = () => {
  fetchArticles()
}

// 打开添加文章对话框
const openAddDialog = () => {
  showAddDialog.value = true
  editMode.value = false
  // 重置表单
  Object.assign(articleForm, {
    article_id: 0,
    title: '',
    content: '',
    intro: '',
    status: true,
    cover: '',
    tag_ids: [],
    category_id: categories.value[0]?.category_id || 0
  })

  // 初始化编辑器
  initVditor()
}

// 编辑文章
const editArticle = (article: ArticleInfo) => {
  editMode.value = true
  showAddDialog.value = true

  console.log('1111' + JSON.stringify(articleForm))

  Object.assign(articleForm, {
    ...article,
    status: Boolean(article.status)
  })

  // 如果tag_id的类型是string，将其转为数字数组
  if (typeof article.tag_ids === "string") {
    // 转换标签ID为数组
    articleForm.tag_ids = article.tag_ids?.split(',').map(item => parseInt(item));
  }

  // 初始化编辑器并设置内容
  initVditor(article.content)
}

// 初始化Vditor编辑器
const initVditor = (content = '') => {
  // 确保DOM已经渲染
  nextTick(() => {
    if (vditor.value) {
      vditor.value.destroy()
    }

    vditor.value = new Vditor('vditor', {
      height: 500,
      placeholder: '在此输入文章内容...',
      theme: 'classic',
      counter: {
        enable: true,
        type: 'markdown'
      },
      preview: {
        hljs: {
          style: 'github'
        }
      },
      upload: {
        url: uploadUrl.value,
        linkToImgUrl: uploadUrl.value,
        fieldName: 'file',
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        format(files, response) {
          const res = JSON.parse(response)
          if (res.code === '00000') {
            return JSON.stringify({
              msg: '',
              code: 0,
              data: {
                errFiles: [],
                succMap: {
                  [files[0].name]: res.data.url
                }
              }
            })
          }
          return response
        }
      },
      after: () => {
        if (content) {
          vditor.value?.setValue(content)
        }
      }
    })
  })
}

// 提交文章表单
const submitArticleForm = async () => {
  // 表单验证
  if (!articleForm.title.trim()) {
    ElMessage.warning('请输入文章标题')
    return
  }

  if (!articleForm.category_id) {
    ElMessage.warning('请选择文章分类')
    return
  }

  // 从编辑器获取内容
  if (vditor.value) {
    articleForm.content = vditor.value.getValue()
  }

  if (!articleForm.content.trim()) {
    ElMessage.warning('请输入文章内容')
    return
  }

  // 验证通过
  if (!editMode.value) {
    // 添加文章
    // 组合数据，符合后端存储格式

    // 获取当前日期，设置为添加日期,更新日期
    // 获取秒级时间戳
    articleForm.status = articleForm.status ? 1 : 0;

    // 设置添加时间和修改时间
    articleForm.add_date = timestampInSeconds
    articleForm.update_date = timestampInSeconds

    // 如果当前用户选中发布
    if (articleForm.status === 1) {
      articleForm.publish_date = timestampInSeconds
    }

    // 如果tag_id的类型是number[]，将其转为字符串
    if (articleForm.tag_ids instanceof Array) {
      // 转换标签ID为数组
      articleForm.tag_ids = articleForm.tag_ids.join(',')
    }

    // 发送请求，提交articleForm
    await ArticleAPI.addArticle(articleForm)
    // 提交逻辑
    ElMessage.success('文章创建成功')

  } else {
    // 修改文章

    articleForm.status = articleForm.status ? 1 : 0;

    // 设置修改时间
    articleForm.update_date = timestampInSeconds

    // 如果草稿没发布过，在表单中点击了发布
    if (articleForm.status === 1 && articleForm.publish_date === 0) {
      articleForm.publish_date = timestampInSeconds
    }

    // 如果tag_id的类型是number[]，将其转为字符串
    if (articleForm.tag_ids instanceof Array) {
      // 转换标签ID为数组
      articleForm.tag_ids = articleForm.tag_ids.join(',')
    }

    console.log('修改文章' + JSON.stringify(articleForm))

    // 发送请求，修改articleForm
    await ArticleAPI.updateArticle(articleForm)

    ElMessage.success('文章修改成功')

  }

  showAddDialog.value = false
  fetchArticles()
}

// 删除文章
const deleteArticle = (article: ArticleInfo) => {
  ElMessageBox.confirm(
    `确定要删除文章 "${article.title}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      // 调用删除API
      await ArticleAPI.deleteArticle(article.article_id)
      ElMessage.success('文章删除成功')
      fetchArticles()
    } catch (error) {
      console.error('删除文章失败:', error)
      ElMessage.error('删除文章失败')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 切换文章状态
const toggleStatus = (article: ArticleInfo) => {
  const newStatus = !article.status
  const action = newStatus ? '发布' : '设为草稿'
  console.log(newStatus)
  ElMessageBox.confirm(
    `确定要将文章 "${article.title}" ${action}吗？`,
    '状态变更',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(async () => {
    try {
      // 调用更新状态API
      await ArticleAPI.updateArticleStatus(article.article_id, newStatus ? 1 : 0)
      article.status = newStatus
      ElMessage.success(`文章已${action}`)
    } catch (error) {
      console.error('更新文章状态失败:', error)
      ElMessage.error('更新文章状态失败')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 查看文章
const viewArticle = (article: ArticleInfo) => {
  // 这里应该跳转到文章详情页
  ElMessage.info(`查看文章: ${article.title}`)
}

// 封面图片上传成功处理
const handleCoverSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  articleForm.cover = URL.createObjectURL(uploadFile.raw!)
  articleForm.cover = 'http://127.0.0.1:4000/' + response.data.path
}

// 封面图片上传前验证
const beforeCoverUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件')
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB')
  }

  return isImage && isLt5M
}

// 对话框关闭时销毁编辑器
const handleDialogClosed = () => {
  if (vditor.value) {
    vditor.value.destroy()
    vditor.value = null
  }
}

// 组件销毁时销毁编辑器
onBeforeUnmount(() => {
  if (vditor.value) {
    vditor.value.destroy()
  }
})

// 处理文章选择
const handleSelectionChange = (selection: ArticleInfo[]) => {
  selectedArticles.value = selection
}

// 批量删除
const batchDelete = () => {
  if (selectedArticles.value.length === 0) {
    ElMessage.warning('请选择要删除的文章')
    return
  }

  const titles = selectedArticles.value.map(a => a.title).join(', ')
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedArticles.value.length} 篇文章吗？此操作不可撤销。`,
    '批量删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      // 调用批量删除API
      // const ids = selectedArticles.value.map(a => a.article_id).join(',')
      // await ArticleAPI.batchDeleteArticles(ids)
      ElMessage.success('文章批量删除成功')
      selectedArticles.value = []
      fetchArticles()
    } catch (error) {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 批量发布
const batchPublish = () => {
  if (selectedArticles.value.length === 0) {
    ElMessage.warning('请选择要发布的文章')
    return
  }

  ElMessageBox.confirm(
    `确定要发布选中的 ${selectedArticles.value.length} 篇文章吗？`,
    '批量发布确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(async () => {
    try {
      // 调用批量更新状态API
      // const ids = selectedArticles.value.map(a => a.article_id).join(',')
      // await ArticleAPI.batchUpdateStatus(ids, true)
      ElMessage.success('文章已批量发布')
      selectedArticles.value = []
      fetchArticles()
    } catch (error) {
      console.error('批量发布失败:', error)
      ElMessage.error('批量发布失败')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 批量设为草稿
const batchDraft = () => {
  if (selectedArticles.value.length === 0) {
    ElMessage.warning('请选择要设为草稿的文章')
    return
  }

  ElMessageBox.confirm(
    `确定要将选中的 ${selectedArticles.value.length} 篇文章设为草稿吗？`,
    '批量设为草稿确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info',
    }
  ).then(async () => {
    try {
      // 调用批量更新状态API
      // const ids = selectedArticles.value.map(a => a.article_id).join(',')
      // await ArticleAPI.batchUpdateStatus(ids, false)
      ElMessage.success('文章已批量设为草稿')
      selectedArticles.value = []
      fetchArticles()
    } catch (error) {
      console.error('批量设为草稿失败:', error)
      ElMessage.error('批量设为草稿失败')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}
</script>

<style scoped>
.article-manager-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.title {
  margin: 0;
  color: #303133;
  font-weight: 600;
  font-size: 24px;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.table-card {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}

.article-cover {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  background-color: #f8f8f8;
}

.article-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.admin-tag {
  margin-left: 8px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}

.article-intro {
  color: #909399;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.batch-actions {
  padding: 15px;
  background-color: #f8f8f8;
  border-top: 1px solid #ebeef5;
  display: flex;
  gap: 15px;
}

.cover-uploader-container {
  display: flex;
  gap: 20px;
}

.cover-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 150px;
  background: #f8f8f8;
}

.cover-uploader:hover {
  border-color: #409EFF;
}

.cover-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #8c939d;
}

.cover-uploader-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.cover-tip {
  font-size: 14px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.cover-hint {
  font-size: 12px;
  color: #909399;
}

.danger-item {
  color: #f56c6c;
}

/* 编辑器样式 */
.editor-container {
  margin-top: 20px;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.editor-title {
  font-weight: 600;
  color: #303133;
}

.editor-tools {
  display: flex;
  gap: 10px;
}

.vditor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.article-dialog {
  max-width: 1200px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

@media (max-width: 992px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .cover-uploader-container {
    flex-direction: column;
  }

  .cover-actions {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: flex-start;
  }

  .pagination-container {
    overflow-x: auto;
  }

  .article-dialog {
    width: 95%;
  }

  .editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .editor-tools {
    width: 100%;
    justify-content: flex-end;
  }
}

.vditor-toolbar {
  background-color: #f8f8f8 !important;
  border-bottom: 1px solid #ebeef5 !important;
  padding: 8px 10px !important;
}

.vditor-reset {
  padding: 20px !important;
  min-height: 500px !important;
}

.vditor-content {
  border-radius: 0 0 4px 4px !important;
}

.vditor-ir__node {
  min-height: 500px !important;
}

.vditor-preview {
  padding: 20px !important;
}
</style>

